<div th:fragment="html"> 

<script> 
function imgAndInfoPageRegisterListeners(vue){
    var stock = vue.p.stock;
    $(".productNumberSetting").keyup(function(){
        var num= $(".productNumberSetting").val();
        num = parseInt(num);
        if(isNaN(num))
            num= 1;
        if(num<=0)
            num = 1;
        if(num>stock)
            num = stock;
        $(".productNumberSetting").val(num);
    });
     
    $(".increaseNumber").click(function(){
        var num= $(".productNumberSetting").val();
        num++;
        if(num>stock)
            num = stock;
        $(".productNumberSetting").val(num);
    });
    $(".decreaseNumber").click(function(){
        var num= $(".productNumberSetting").val();
        --num;
        if(num<=0)
            num=1;
        $(".productNumberSetting").val(num);
    });
     
    $(".addCartButton").removeAttr("disabled");
    $(".addCartLink").click(function(){
        var url = "forecheckLogin";
        axios.get(url).then(function(response) {
            if(0==response.data.code){
                var pid = vue.p.id;
                var num= $(".productNumberSetting").val();
                var url =  "foreaddCart?pid="+pid+"&num="+num;
	            axios.get(url).then(function(response) {
		        	var result = response.data;
	                if(0==result.code){
	                    $(".addCartButton").html("已加入购物车");
	                    $(".addCartButton").attr("disabled","disabled");
	                    $(".addCartButton").css("background-color","lightgray")
	                    $(".addCartButton").css("border-color","lightgray")
	                    $(".addCartButton").css("color","black")
	                }
				});	
            }
            else{
                $("#loginModal").modal('show');                     
            }        	
        });
    });
    $(".buyLink").click(function(){
        var url = "forecheckLogin";
        axios.get(url).then(function(response) {
        	if(0==response.data.code){
                 var pid = vue.p.id;
                 var num= $(".productNumberSetting").val();
	             var url =  "forebuyone?pid="+pid+"&num="+num;
	             axios.get(url).then(function(response) {
	             	var oiid = response.data;
	             	location.href="buy?oiid="+oiid;	
	             });	            		
			}
        	else{
                $("#loginModal").modal('show');                     
        	}
        });
        return false;
    });
     
    $("button.loginSubmitButton").click(function(){
        var url =  "forelogin";
        if(0==vue.user.name.length){
            $("span.errorMessage").html("请输入用户名");
            $("div.loginErrorMessageDiv").css("visibility","visible");
            return;
        }
        if(0==vue.user.password.length){
            $("span.errorMessage").html("请输入密码");
            $("div.loginErrorMessageDiv").css("visibility","visible");
            return;
        }                    
        
        axios.post(url,vue.user).then(function(response) {
        	var result = response.data;
        	if(result.code==0){
        		location.href="product?pid="+vue.p.id;
        	}
        	else{
                $("span.errorMessage").html(result.message);
                $("div.loginErrorMessageDiv").css("visibility","visible");	                    		
        	}
        });
    });
     
    $("img.smallImage").mouseenter(function(){
        var bigImageURL = $(this).attr("bigImageURL");
        $("img.bigImg").attr("src",bigImageURL);
    });
     
    $("img.bigImg").load(
        function(){
            $("img.smallImage").each(function(){
                var bigImageURL = $(this).attr("bigImageURL");
                img = new Image();
                img.src = bigImageURL;
                 
                img.onload = function(){
                    $("div.img4load").append($(img));
                };
            });     
        }
    );
}
 
</script>
	 
	<div class="imgAndInfo">
	 
	    <div class="imgInimgAndInfo">
	        <img v-if="firstProductImage!=null" :src="'img/productSingle/'+firstProductImage.id+'.jpg'" class="bigImg">
	        <div class="smallImageDiv">
                <img v-for="pi in p.productSingleImages" :src="'img/productSingle_small/'+pi.id+'.jpg'" :bigImageURL="'img/productSingle/'+pi.id+'.jpg'" class="smallImage">
	        </div>
	        <div class="img4load hidden" ></div>
	    </div>
	
	
	    <div class="infoInimgAndInfo">
	         
	        <div class="productTitle">
	            {{p.name}}
	        </div>
	        <div class="productSubTitle">
	            {{p.subTitle}}
	        </div>
	
	
	
	        <div class="productPrice">
	            <div class="juhuasuan">
	                <span class="juhuasuanBig" >聚划算</span>
	                <span>此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始，</span>
	            </div>
	
	
	
	            <div class="productPriceDiv">
	                <div class="gouwujuanDiv"><img height="16px" src="img/juhuasuan.png">
	                <span> 全实物商品通用</span>
	                 
	                </div>
	                <div class="originalDiv">
	                    <span class="originalPriceDesc">价格</span>
	                    <span class="originalPriceYuan">¥</span>
	                    <span class="originalPrice">
	                    	{{p.originalPrice|formatMoneyFilter}}
	                    </span>
	                </div>
	
	                <div class="promotionDiv">
	                    <span class="promotionPriceDesc">温馨价 </span>
	                    <span class="promotionPriceYuan">¥</span>
	                    <span class="promotionPrice">
							{{p.promotePrice|formatMoneyFilter}}
	                    </span>
	                </div>
	            </div>
	        </div>
	
	        <div class="productSaleAndReviewNumber">
	            <div>销量 <span class="redColor boldWord"> {{ p.saleCount }}</span></div>   
	            <div>累计评价 <span class="redColor boldWord"> {{ p.reviewCount }}</span></div>    
	        </div>
	        <div class="productNumber">
	            <span>数量</span>
	            <span>
	                <span class="productNumberSettingSpan">
	                <input class="productNumberSetting" type="text" value="1">
	                </span>
	                <span class="arrow">
	                    <a href="#nowhere" class="increaseNumber">
	                    <span class="updown">
	                            <img src="img/加一.png" width="15px">
	                    </span>
	                    </a>
	                     
	                    <span class="updownMiddle"> </span>
	                    <a href="#nowhere"  class="decreaseNumber">
	                    <span class="updown">
	                            <img src="img/减一.png" width="15px">
	                    </span>
	                    </a>
	                     
	                </span>
	                     
	            件</span>
	            <span>库存{{p.stock}}件</span>
	        </div>
	        <div class="serviceCommitment">
	            <span class="serviceCommitmentDesc">服务承诺</span>
	            <span class="serviceCommitmentLink">
	                <a href="#nowhere">正品保证</a>
	                <a href="#nowhere">极速退款</a>
	                <a href="#nowhere">赠运费险</a>
	                <a href="#nowhere">七天无理由退换</a>
	            </span>
	        </div>    
	         
	        <div class="buyDiv">
	            <a class="buyLink" ><button class="buyButton" >立即购买</button></a>
	            <a href="#nowhere" class="addCartLink"><button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a>
	        </div>
	    </div>
	     
	    <div style="clear:both"></div>
	     
	</div>
</div>
